Hello and welcome to this lecture in this lecture.
We will be creating the functionality for our digital clock.
Okay.
So this is where I will implement the code for the digital clock.
The first line of code here is this set interval function.
This method here is medart is what is used to keep the clock running.
So it is used to call the clock continuously.
It will keep the clock.
It kinda like starts the engine and keeps it running.
It's like a car is the ignition if you like for the clock.
So this will keep it running as long as the active hold.
The browser window is opened so inside this function here here we all define variables and other stuff
that the club all need to run.
So the first thing here we are online to here.
Define a variable called corrent time where you create variables.
Is good to name them appropriately so.
To define a variable you type in a V are followed by the name of the variable and then use it equal
to to assign a value to the variable in the value of A for variable is equal to a new date.
This new date method is an object.
You said Date object in javascript.
It is what is used to define a.
So when you use this object this new date it will create a new date object which will include the current
date and time.
I have created some other variables here from Line 3 to 6.
Again this variable here online 3 is call.
I have called it hours and what it will do.
It is a variable that will use to display the current time so it will check the current time and just
display.
Get the hours.
So when we want to post 5 hours this is the method we will use to get ours life for here.
Same thing is what will use to display the minutes.
So each tool referenced the current time object and then use this.
Get this method to get all the minutes.
Same thing will load 5 to reference this object and get to seconds.
So this method or method here is these ones here call end time Doc.
How's Coron time.
Get menus and get seqence there or have us group of gifts that will get the relevant this will get ours
this will get the minutes.
This will get the second line 6 is a variable that will determine if the clock is in or if the clock
is P.M. so to determine that will need to use some if statements.
Okay I've added some more chunk of code here.
So from line 7 to like 8 in there is some if statements there to determine if the clock should display
in M or P.
So Line 7 years is if there were specifying the conditions for a to b or P. M. were saying that if the
hours is greater than or less than 12 then the period will be p. m..
Which is this not this line 6 here.
This variable here it will display it will display.
P. M. C..
If the hours is greater than or equal to twelfth the period will be p. m..
Or if the hours is less than 12 the hours here will be was 2 hours minus 12.
Again here.
This second is less than 10 seconds here will be zero bloss seconds.
Okay so that's well defined the second.
Again like 16 if the minutes is less than 10 minutes would be equal to zero.
Plus the minutes that the clock is displayed.
Notice it will be dirac getting all this information from the local computer so whatever time the local
computer has this play and that's where it will pick the data from.
Okay.
I added some more could hear from line 19 here.
So line 19 are defined on a variable called a clock time.
And giving it a value of ours.
Plotz You notice here this is a column that would show for example we'll show twelve oclock.
Then this colon Plus the minutes plus the seconds.
So this is the clog time variable and it will pick up this house here kloss was his display the hours
it will now display this out plus 10 minutes and then it will displayed his cologne pics of the scans
and then displays to Seconds plosser to Pyrate dipiero means if this period here is it will display
it.
If he's happy to display p.m. notice all these are all variable.
So if we look up here we define the viro but they are online says cord period.
There's a variable called second variable called how.
So all these are variable values that we've already defined that this line 19 variable will use line
21 here that you've defined on a variable variable college clock and this clock will be we'll going
to use a javascript method as says documents get elemental by D.
The idea here is the clock which will define if I flick over to the highest email document here.
So does the email we've got and Heidi called clock.
So this is the idees talking about it all.
Grab this idea and inject D.J of us.
Group code inside this div So in that once it does that it will display the correct clock.
That's what that document kit really meant by Heidi means so it will grab that idea from that div and
inject this here which is the javascript code.
It will inject the clock time the current time of the clock and clock dot in that text so any text that
is showing it all display that is replaced with this comment current clock time.
This here is the interval.
It will do that every millisecond So this is the interval.
It will take is in milliseconds so every milliseconds it will keep running and it will display the look.
Okay so that's basically all the javascript required to get the clock running.
Make sure you have your semicolons specified in the right order.
If not it will not work.
So if I save this code refresh the clock page
so this is a club to refresh this.
Hopefully the clocks should show case not showing them must be something wrong.
So let's go both a case of refresh.
Now the clock is working as it should.
So you should have yours taken over.
If it isn't.
Just look through your code again and make sure that or these semicolons are in place.
If there's any issues please let me know.
So let's see it for this project.
In this projet we have successfully implemented a digital clock.
Thanks for your time.
Bye for now.